<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js"></script>
</head>
<body style="padding: 10px 0 0 10px;">

<form class="layui-form" id="id_form_search" name="searchForm">
	<div class="layui-form-item">
		<input type="hidden" name="state" value="0">
		
		<div class="layui-inline" th:each="displayHtml : ${dto.query.displayHtmls}">
			[(${displayHtml})]
		</div>
<!-- 
<div class="layui-collapse" lay-accordion="">
  <div class="layui-colla-item" onclick="changeCollapse(this)">
    <h2 class="layui-colla-title">更多搜索条件</h2>
    <div class="layui-colla-content">
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="userCode" type="text" class="layui-input" placeholder="请输入员工工号"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="code" type="text" class="layui-input" placeholder="请输入商品编码"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="asin" type="text" class="layui-input" placeholder="请输入竞品ASIN"></div>
		</div>
    </div>
  </div>
</div>
 -->
		<!-- <div class="layui-inline">
			<div class="layui-inline"><input type="checkbox" name="isCount" title="统计"></div>
		</div> -->
		<div class="layui-inline">
			<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm search_btn" lay-submit="" lay-filter="filter_form_search" style="margin-left: 35%;"><i class="layui-icon layui-icon-search"></i> 搜索</button>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger layui-btn-sm clean_search_form_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-close"></i> 清空</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm refresh_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-refresh"></i> 刷新</a>
			<script>
				// 刷新按钮
				$(".refresh_btn").click(function(){
					layer.confirm("确定刷新吗？",{
						btn: ['确定', '取消']
					}, function (index) {
						location.reload();
						layer.close(index);
					});
				});
			</script>
		</div>
	</div>
</form>


<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
 
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		[(${dto.toolbar.buttonHtml})]
	</div>
</script>
 
<script type="text/html" id="cityTpl">
	<select id="demoCity1" class="layui-border" lay-ignore>
		<option value="浙江杭州">浙江杭州</option>
		<option value="江西南昌">江西南昌</option>
		<option value="湖北武汉">湖北武汉</option>
	</select>
</script>
<script type="text/html" id="switchTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="sex2" value="{{ d.sex == '男' ? 0 : 1}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
</script>
<script type="text/html" id="checkboxTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
<script type="text/html" id="usernameTpl">
	<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="sexTpl">
	{{#  if(d.sex === '女'){ }}
		<span style="color: #F581B1;">{{ d.sex }}</span>
	{{#  } else { }}
		{{ d.sex }}
	{{#  } }}
</script>

<div id="xxxxxxxxxx" th:each="domTemplet : ${dto.domTempletArr}">
[(${domTemplet})]
</div>

<script>
layui
	.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
	.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption'], function(){
	var element = layui.element;
	var table = layui.table;
	var dropdown = layui.dropdown;
	var form = layui.form;
	
	var fn1 = function (field) {
        return function (data) {
            var value = 0;
            return [
                '<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
                '<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
                '<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
                '</select>'
            ].join('');
        };
    };
	
	/*
	layer.msg('本示例演示的数据为静态模拟数据，<br>实际使用时换成您的真实接口即可。', {
		closeBtn: 1,
		icon: 6,
		time: 21*1000,
		offset: '21px'
	});
	*/
	
	// 创建渲染实例
	table.render({
		elem: '#main_table'
		,url:'[[${dto.menu.pathGridRequest}]]' // 此处为静态模拟数据，实际使用时需换成真实接口
		,toolbar: '#toolbarDemo'
		,defaultToolbar: ['filter', 'exports', 'print', {
			title: '帮助'
			,layEvent: 'LAYTABLE_TIPS'
			,icon: 'layui-icon-tips'
		}]
		,height: 'full-200' // 最大高度减去其他容器已占有的高度差
		,limit : 20
		,limits : [20,50,500,9999]
		,cellMinWidth: 95
		,totalRow: true // 开启合计行
		,page: true
		,request: {
			pageName: 'page',
			limitName: 'size'
		}
		,skin: 'row'
		,even: true // 开启隔行背景
		,cols: [
			[(${dto.colGridArr})]
		]
		,done: function(){
			var id = this.id;
			 
			// 重载测试
			dropdown.render({
				elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
				,data: [{
					id: 'reload',
					title: '重载'
				},{
					id: 'reload-deep',
					title: '重载 - 参数叠加'
				},{
					id: 'reloadData',
					title: '仅重载数据'
				},{
					id: 'reloadData-deep',
					title: '仅重载数据 - 参数叠加'
				}]
				// 菜单被点击的事件
				,click: function(obj){
					switch(obj.id){
						case 'reload':
							// 重载 - 默认（参数重置）
							table.reload('main_table', {
								where: {
									abc: '123456'
									//,test: '新的 test2'
									//,token: '新的 token2'
								}
								/*
								,cols: [ [ // 重置表头
								{type: 'checkbox', fixed: 'left'}
								,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
								,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
								,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
								,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
								,{field:'joinTime', title:'加入时间', width:120}
								] ]
								*/
							});
							break;
						case 'reload-deep':
							// 重载 - 深度（参数叠加）
							table.reload('main_table', {
								where: {
									abc: 123
									,test: '新的 test1'
								}
								//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
								//,cols: ins1.config.cols
							}, true);
							break;
						case 'reloadData':
							// 数据重载 - 参数重置
							table.reloadData('main_table', {
								where: {
									abc: '123456'
									//,test: '新的 test2'
									//,token: '新的 token2'
								}
								,scrollPos: 'fixed'// 保持滚动条位置不变 - v2.7.3 新增
								,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
								//,url: '404'
								//,page: {curr: 1, limit: 30} // 重新指向分页
							});
							break;
						case 'reloadData-deep':
							// 数据重载 - 参数叠加
							table.reloadData('main_table', {
								where: {
									abc: 123
									,test: '新的 test1'
								}
							}, true);
							break;
					}
					layer.msg('可观察 Network 请求参数的变化');
				}
			});
			
			// 更多测试
			dropdown.render({
				elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
				,data: [{
					id: 'add',
					title: '添加'
				},{
					id: 'update',
					title: '编辑'
				},{
					id: 'delete',
					title: '删除'
				}]
				//菜单被点击的事件
				,click: function(obj){
					var checkStatus = table.checkStatus(id)
					var data = checkStatus.data; // 获取选中的数据
					switch(obj.id){
						case 'add':
							layer.open({
								title: '添加',
								type: 1,
								area: ['80%','80%'],
								content: '<div style="padding: 16px;">自定义表单元素</div>'
							});
							break;
						case 'update':
							if(data.length !== 1) return layer.msg('请选择一行');
							layer.open({
								title: '编辑',
								type: 1,
								area: ['80%','80%'],
								content: '<div style="padding: 16px;">自定义表单元素</div>'
							});
							break;
						case 'delete':
							if(data.length === 0){
								return layer.msg('请选择一行');
							}
							layer.msg('delete event');
							break;
					}
				}
			});
			
		}
		,error: function(res, msg){
			console.log(res, msg)
		}
	});
	
	// 工具栏事件
	table.on('toolbar(main_table)', function(obj){
		var id = obj.config.id;
		var checkStatus = table.checkStatus(id);
		var othis = lay(this);
		switch(obj.event){
			[(${dto.toolbar.buttonScript})]
		};
	});
	 
	//触发单元格工具事件
	table.on('tool(main_table)', function(obj){ // 双击 toolDouble
		var data = obj.data;
		//console.log(obj)
		if(obj.event === 'del'){
			layer.confirm('真的删除行么', function(index){
				obj.del();
				layer.close(index);
			});
		} else if(obj.event === 'edit'){
			layer.open({
				title: '编辑',
				type: 1,
				area: ['80%','80%'],
				content: '<div style="padding: 16px;">自定义表单元素</div>'
			});
		}
	});
	 
	//触发表格复选框选择
	table.on('checkbox(main_table)', function(obj){
		console.log(obj)
	});
	 
	//触发表格单选框选择
	table.on('radio(main_table)', function(obj){
		console.log(obj)
	});
	
	// 行单击事件
	table.on('row(main_table)', function(obj){
		//console.log(obj);
		//layer.closeAll('tips');
	});
	// 行双击事件
	table.on('rowDouble(main_table)', function(obj){
		console.log(obj);
	});
	 
	// 单元格编辑事件
	table.on('edit(main_table)', function(obj){
		var field = obj.field //得到字段
		,value = obj.value //得到修改后的值
		,data = obj.data; //得到所在行所有键值
		
		var update = {};
		update[field] = value;
		obj.update(update);
		
		var dataCommit = {};
		dataCommit['id'] = data.id;
		dataCommit[field] = value;
		
		doEditOnTable(dataCommit);
	});
	
	//行单击事件（双击事件为：rowDouble）
	table.on('rowDouble(main_table)', function(obj){
		var data = obj.data;
		
		layer.alert(JSON.stringify(data), {
			title: '当前行数据：'
		});
		
		//标注选中样式
		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
	});
	
	//性别操作
	form.on('switch(sexDemo)', function(data){
		layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
	    var value = this.checked ? 1 : 0;
	    modifyTableCacheBySwitch(data, value);
	});
	
	// 绑定选择框(转换)的值变化提交事件
	var filterNamesOfSwitch = '[(${dto.filterNamesOfSwitch})]';
	if(filterNamesOfSwitch != '') {
		var filterNameArr = filterNamesOfSwitch.split(',');
		for(var filterName of filterNameArr) {
			form.on('switch(' + filterName + ')', function(data){
				layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
			    var value = this.checked ? 1 : 0;
			    modifyTableCacheBySwitch(data, value);
			});
		}
	}
	
	// 绑定选择框(下拉)的值变化提交事件
	var filterNamesOfSelector = '[(${dto.filterNamesOfSelector})]';
	if(filterNamesOfSelector != '') {
		var filterNameArr = filterNamesOfSelector.split(',');
		for(var filterName of filterNameArr) {
			form.on('select(' + filterName + ')', function (data) {
			    console.log("data->>>>>>>>>>>>>>>>", data);
			    var selectElem = $(data.elem);
			    var tdElem = selectElem.closest('td');
			    var trElem = tdElem.closest('tr');
			    var tableView = trElem.closest('.layui-table-view');
			    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
				
			    var dataCommit = {};
				dataCommit['id'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['id'];
				dataCommit[tdElem.data('field')] = data.value;
				console.log(dataCommit);
				doEditOnTable(dataCommit);
			});
		}
	}

	// 更新table的cache
	function modifyTableCacheBySwitch(data, value) {
	    var table = layui.table;
	    var switchElem = $(data.elem);
	    var tdElem = switchElem.closest('td');
	    var trElem = tdElem.closest('tr');
	    var tableView = trElem.closest('.layui-table-view');
	    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
		
		var dataCommit = {};
		dataCommit['id'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['id'];
		dataCommit[tdElem.data('field')] = value;
		doEditOnTable(dataCommit);
	}
	
	//锁定操作
	form.on('checkbox(lockDemo)', function(obj){
		layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
	});

	// 搜索按钮
	form.on('submit(filter_form_search)', function(data){
		layui.table.reload("main_table",{
			page: {
				curr: 1
			},
			where: data.field
		})
		console.log(data.field);
		return false;
	});
	
	//折叠面板点击事件
	element.on('collapse(test_collapse)', function(data){
		//layer.msg('展开状态：'+ data.show);
	});
});

// 折叠搜索条件
function changeCollapse(dom) {
	if($(dom).find('.layui-colla-content').hasClass('layui-show') == false) {
		$(dom).find('.layui-colla-content').addClass('layui-show');
	} else {
		$(dom).find('.layui-colla-content').removeClass('layui-show');
	}
}

// 在表格上修改
function doEditOnTable(dataCommit) {
	var indexOfLoading = layer.load(1, {
		shade: [0.5,'#000000'] //0.1透明度的白色背景
	});
	$.post('[[${dto.menu.pathGridEditRequest}]]', dataCommit, function(res){
		if (res.code == 0) {
			layer.msg(res.msg);
			layer.close(indexOfLoading);
		} else {
			layer.close(indexOfLoading);
			layer.msg(res.msg);
		}
	});
}

$('body').on("mouseenter",".layui-table-body tr",function () {
    $(this).siblings().find("div").css("color","#666");
    $(this).find("div").css("color","#4DA1FF");
})
</script>

</body></html>